<template>
  <div>
    <div  v-for="(item,index) in cartItems"
    :key="index"
    class="cart_item_container">
      <div>{{item.name}}</div>
      <div>{{item.count}}</div>
      <div>
        <input type="checkbox"
        :checked="item.checked"
        @change="onChange(item)"/>
      </div>
    </div>
    <div>
      <div>
        <input type="checkbox"  :checked="allSelected"
        @change="onChangeAll()"/>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed:{
    cartItems:function(){
      return this.$store.state.cartModule.cartItems
    },
    allSelected:function(){
      return this.$store.state.cartModule.allSelected
    }
  },
  methods:{
    onChange(item){
      window.console.log(item)
      window.console.log(event.target.checked)
      var checked = event.target.checked
      this.$store.dispatch("changeItemStatus",{
        checked:checked,
        id:item.id
      })
    },
    onChangeAll(){
      var checked = event.target.checked;
      this.$store.dispatch("changeAllselect",checked)
    }
  }
}
</script>

<style scoped>
.cart_item_container
{
  width: 100%;
  height: 130px;
  border: 1px solid red;
}
</style>